<template>
    <view>
        <view class="UCenter-bg">
            <view class="userinfo-avatar">
                <open-data type="userAvatarUrl"></open-data>
            </view>
            <view class="text-xl">
                <open-data type="userNickName"></open-data>
            </view>

        </view>
        <view class="padding flex text-center text-grey bg-white shadow-warp">
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl text-price text-orange">{{statistics.surplus.toFixed(2)}}
                </view>
                <view class="margin-top-sm">账户余额</view>
            </view>
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl text-price text-orange">{{statistics.dailyBonus.toFixed(2)}}</view>
                <view class="margin-top-sm">今日收益</view>
            </view>
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl  text-blue">{{statistics.totalAmount.toFixed(2)}}</view>
                <view class="margin-top-sm">总收入</view>
            </view>
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl text-green">{{statistics.cashOut.toFixed(2)}}</view>
                <view class="margin-top-sm">已提现</view>
            </view>
        </view>
        <view class="cu-list menu sm-border margin-top">
            <view class="cu-item arrow">
                <navigator class="content" hover-class="none" url="../my-cash/my-cash">
                    <text class="cuIcon-sponsor text-blue"></text>
                    <text class="text-grey">资金明细</text>
                </navigator>
            </view>
        </view>
        <view :class="modalName==='rule'?'show':''" class="cu-modal bottom-modal">
            <view class="cu-dialog">
                <view class="cu-bar bg-white">
                    <view @tap="hideModal" class="action text-blue">关闭</view>
                </view>
                <view class="padding-xl">

                    <view class="flex-sub text-left">
                        <view class="solid-bottom text-lg padding">
                            <text class="text-black">规则说明</text>
                        </view>
                        <view class="padding text-gray text-sm">1、所有快醒合作用户可随时提现，提现金额不限，次数不限</view>
                        <view class="padding text-gray text-sm">2、若提现未能即时到账，可能是网络延迟等原因，请耐心等待</view>
                        <view class="padding text-gray text-sm">3、若提现遇到问题，请联系快醒官方客服为你解答，客服热线：4000888193</view>
                    </view>
                </view>
            </view>
        </view>
        <view :class="modalName==='cash'?'show':''" class="cu-modal">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">提现到微信钱包</view>
                    <view @tap="hideModal" class="action">
                        <text class="cuIcon-close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    <view class="cu-form-group">
                        <input placeholder="输入提现金额" type="digit" v-model="amount" v-on:change="amountChange"/>
                        <button @tap="all" class='cu-btn bg-green shadow'>全部</button>
                    </view>
                </view>
                <view class="cu-bar bg-white">
                    <view @tap="transfer" class="action margin-0 flex-sub text-green ">
                        <text class="cuIcon-moneybag"></text>
                        立即提现
                    </view>
                    <view @tap="hideModal" class="action margin-0 flex-sub text-green solid-left">取消</view>
                </view>
            </view>
        </view>
        <view class="padding flex flex-direction">
            <button @tap="showModal" class="cu-btn bg-red lg round" data-target="cash" v-if="statistics.surplus > 0">提现
            </button>
        </view>
        <view class="padding flex flex-direction">
            <button @tap="showModal" class="cu-btn bg-grey round" data-target="rule">提现规则说明</button>
        </view>
    </view>
</template>

<script lang="ts">
    import {http} from "@/utils/utils";
    import {appInfo} from "@/common/helper";
    import Vue from 'vue';

    export default Vue.extend({
        name: 'moneybag',
        data() {
            return {
                modalName: null,
                amount: "0.00",
            };
        },
        props: {
            statistics: {}
        },
        methods: {
            showModal(e: any) {
                this.modalName = e.currentTarget.dataset.target
            },
            hideModal() {
                this.modalName = null
            },
            all() {
                // this.amount = this.ye.toFixed(2)
            },
            amountChange(e: any) {
                const a = e.target.value;
                // if (a > this) {
                //     this.amount = this.ye.toFixed(2)
                // }
            },
            transfer() {
                uni.showLoading();
                if (Number.parseFloat(this.amount) > 0) {
                    http.get("api/ma/transfer", {openId: appInfo.session.openid, amount: this.amount})
                        .then((res: any) => {
                            console.log(res);
                            this.hideModal();
                            if (res.data.result_code === 'SUCCESS') {
                                uni.showModal({content: '提现成功，请关注微信到账消息', title: '提现'});
                                uni.startPullDownRefresh()
                            } else {
                                uni.showModal({content: res.data.err_code_des, title: '提现'})
                            }

                        }).finally(() => {
                        uni.hideLoading()
                    })
                }
            },
        }
    })
</script>

<style>
    .userinfo-avatar {
        width: 128upx;
        height: 128upx;
        margin: 20upx;
        border-radius: 50%;
    }

    .UCenter-bg {
        background-color: #fbbd08;
        height: 280upx;
        display: flex;
        justify-content: center;
        padding-top: 40upx;
        overflow: hidden;
        position: relative;
        flex-direction: column;
        align-items: center;
        color: #fff;
        font-weight: 300;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }
</style>
